<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现各种运动之拖拽碰撞加重心运动</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
 
        div {
            width: 3px;
            height: 3px;
            position: absolute;
            background: black;
        }
    </style>
    <script>
 
        var timer = null;
 
        var iSpeedX = 0;
        var iSpeedY = 0;
 
        window.onload = function () {
 
            var oDiv = document.getElementById('div1');
 
            var lastX = 0;
            var lastY = 0;
 
            //为当前元素添加鼠标摁下事件
            oDiv.onmousedown = function (ev) {
                //事件兼容
                var oEvent = ev || event;
 
                //计算鼠标相对于元素左上角的位置
                var disX = oEvent.clientX - oDiv.offsetLeft;
                var disY = oEvent.clientY - oDiv.offsetTop;
 
                //添加鼠标移动事件
                document.onmousemove = function (ev) {
                    //事件兼容
                    var oEvent = ev || event;
 
                    //计算元素相对于当前屏幕的位置
                    var l = oEvent.clientX - disX;
                    var t = oEvent.clientY - disY;
 
                    //赋值给当前元素，实再同步移动
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
 
                    //用当前位置减去上次的位置以计算当前拖动中X和Y轴的速度
                    iSpeedX = l - lastX;
                    iSpeedY = t - lastY;
 
                    //更新当前点，方便下次计算
                    lastX = l;
                    lastY = t;
 
                };
 
                //当鼠标抬起时
                document.onmouseup = function () {
                    //清空移动事件与抬起事件
                    document.onmousemove = null;
                    document.onmouseup = null;
                    //执行碰撞运动
                    startMove();
                };
                //当鼠标按下的时候，关闭定时器，以免拖拽与碰撞事件冲突
                clearInterval(timer);
            };
        };
 
 
 
        function startMove() {
 
            clearInterval(timer);
 
            timer = setInterval(function () {
 
                var oDiv = document.getElementById('div1');
                //将Y轴增加速度，实现重力运动
                iSpeedY += 3;
 
                var l = oDiv.offsetLeft + iSpeedX;
                var t = oDiv.offsetTop + iSpeedY;
 
                //当元素碰到底边时
                if (t >= document.documentElement.clientHeight - oDiv.offsetHeight) {
                    //速度递减
                    iSpeedY *= -0.8;
                    iSpeedX *= 0.8;
                    //误差强行赋值
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;
 
                    //当元素碰到上边时
                } else if (t <= 0) {
                    //速度递减
                    iSpeedY *= -1;
                    iSpeedX *= 0.8;
                    //误差强行赋值
                    t = 0;
                }
 
                //当元素碰到右边时
                if (l >= document.documentElement.clientWidth - oDiv.offsetWidth) {
                    //速度递减
                    iSpeedX *= -0.8;
                    //误差强行赋值
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;
                    //当元素碰到左边时
                } else if (l <= 0) {
                    //速度递减
                    iSpeedX *= -0.8;
                    //误差强行赋值
                    l = 0;
                }
 
 
                //当X轴的速度绝对值小于0时
                if (Math.abs(iSpeedX) < 1) {
                    //强行终止
                    iSpeedX = 0;
                }
                //当Y轴的速度绝对值小于0时
                if (Math.abs(iSpeedY) < 1) {
                    //强行终止
                    iSpeedY = 0;
                }
 
 
                //当速度为零，元素碰到底边时
                if (iSpeedX == 0 &&
                    iSpeedY == 0 &&
                    t == document.documentElement.clientHeight - oDiv.offsetHeight) {
 
                    clearInterval(timer);
 
                } else {
 
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                }
 
            }, 30);
        }
    </script>
</head>
 
<body>
    <input type="button" value="开始运动" onclick="startMove()" />
    <div id="div1"></div>
</body>
 
</html>